<template>
  <el-card>
    <div slot="header" class="df aic jcsb">
      <span>店铺管理</span>
      <el-button v-if="!isEdit" type="primary" @click="isEdit=!isEdit">编辑
      </el-button>
      <el-button v-else type="success" @click="isEdit=!isEdit;onSubmit()">完成
      </el-button>
    </div>
    <!-- form -->
    <el-form :disabled="!isEdit" :model="form" label-width="80px">
      <!-- 店铺名称 -->
      <el-form-item label="店铺名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <!-- 店铺公告 -->
      <el-form-item label="店铺公告">
        <el-input type="textarea" v-model="form.bulletin" :rows="8"></el-input>
      </el-form-item>
      <!-- 店铺头像 -->
      <el-form-item label="店铺头像">
        <el-upload class="avatar-uploader" :action="`${API}/shop/upload`"
          :show-file-list="false" :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="form.avatar" :src="form.avatar" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <!-- 店铺图片 -->
      <el-form-item label="店铺图片">
        <el-upload :action="`${API}/shop/upload`" :file-list="form.pics"
          list-type="picture-card" :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove" :on-success="handleShopUpload">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <!-- 配送费 -->
      <el-form-item label="配送费">
        <el-input v-model="form.deliveryPrice"></el-input>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <!-- form1 -->
    <el-form ref="form" :model="form" label-width="80px">
      <!-- 店铺图片 -->
      <el-form-item label="店铺图片">
        <el-upload :action="`${API}/shop/upload`" :file-list="form.pics"
          list-type="picture-card" :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <!-- 配送费 -->
      <el-form-item label="配送费">
        <el-input v-model="form.deliveryPrice"></el-input>
      </el-form-item>
      <!-- 配送时间 -->
      <el-form-item label="配送时间">
        <el-input v-model="form.deliveryTime"></el-input>
      </el-form-item>
      <!-- 配送描述 -->
      <el-form-item label="配送描述">
        <el-input type="text" v-model="form.description"></el-input>
      </el-form-item>
      <!-- 店铺评分 -->
      <el-form-item label="店铺评分">
        <el-input v-model="form.score"></el-input>
      </el-form-item>
      <!-- 销量 -->
      <el-form-item label="销量">
        <el-input v-model="form.sellCount"></el-input>
      </el-form-item>

      <!-- 活动 -->
      <el-form-item label="活动">
        <!-- 方法一：v-if="form.supports" -->
        <el-checkbox-group v-model="form.supports" v-if="form.supports">
          <el-checkbox label="在线支付满28减5" name="type"></el-checkbox>
          <el-checkbox label="VC无限橙果汁全场8折" name="type"></el-checkbox>
          <el-checkbox label="单人精彩套餐" name="type"></el-checkbox>
          <el-checkbox label="特价饮品8折抢购" name="type"></el-checkbox>
          <el-checkbox label="单人特色套餐" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <!-- 营业时间 -->
      <el-form-item label="营业时间">
        <!-- is-range: 是否为时间范围选择，仅对<el-time-picker>有效	-->
        <el-date-picker is-range v-model="form.date" type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" align="right">
        </el-date-picker>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { getShopInfoReq } from "@/api/shop";

export default {
  data() {
    return {
      API: "http://sell.h5.itsource.cn:8087",
      form: {
        // supports:[],//方法二
      },
      isEdit: false, //是否可编辑
      //图片
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  methods: {
    async getData() {
      let res = await getShopInfoReq();
      //修改图片地址数据
      let pics = res.data.data.pics.map((v) => {
        return { url: v };
      });
      //修改评分
      let scope = res.data.data.scope / 20;
      this.form = { ...res.data.data, pics, scope };
      // console.log("this.form :>> ", this.form);
    },

    //上传成功触发函数
    async handleAvatarSuccess(res) {
      // console.log('res :>> ', res)

      let { code, msg, imgUrl } = res;
      if (code === 0) {
        //发送请求修改头像
        this.$message.success(msg);

        //数据回显
        this.form.avatar = imgUrl;
      }
    },

    //约束上传文件类型&上传文件大小
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg'
      const isJPG = /(png|jpeg)/.test(file.type);
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    //多功能上传钩子
    handleShopUpload(res) {
      // console.log("res :>> ", res);
      let { code, msg, imgUrl } = res;
      if (code === 0) {
        this.form.pics.push({ url: imgUrl });
        this.$message.success(msg);
      }
    },

    //图片
    handleRemove(file, fileList) {
      //直接数据赋值
      // console.log(fileList);
      this.form.pics = fileList;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    //完成上传处理数据
   async onSubmit() {
      // console.log("submit!");
      //处理数据
      let pics = this.formData.pics.map((v) => v.url);
      let score = this.formData.score * 20;
      let res = await editShopReq({
        ...this.formData,
        pics,
        score,
      });
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.el-form {
  width: 500px;
}

.avatar-uploader :deep(.el-upload) {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
}
.avatar {
  width: 90px;
  height: 90px;
  display: block;
}
</style>
